<template>
  <div style="padding: 0px;height:100%" v-if="isShow">
    <el-row v-if="form.infType == 'C'" class="row-container">
      <el-row>
        <div :style="{margin: '0px',padding: '5px', width:'100%' }">
          <el-tabs v-model="activeNameCata" lazy="false" style="display: flex;flex-direction: column;height: 100%;">
            <el-tab-pane label="接口列表" name="infChildrenList" class="flex-cloumn"
                         :style="{height: '100%',width: '100%'}">
              <el-row>
                <div class="center-top">
                  <span v-if="true" class="item"> <strong>{{ directoryInfo.name }} {{
                      directoryInfo.size
                    }}</strong> </span>
                  <!-- <span v-if="reportCheckList.length != 0" class="item">已选 {{ reportCheckList.length }} 项</span>
                  <el-link v-if="reportCheckList.length != 0" style="font-size: 15px; margin-left: 10px;" :underline="false" @click="removeReport">移除</el-link> -->
                </div>
              </el-row>
              <xTable ref="infTableRef" refId="infTableRef" :data="infChildrenList" border
                      v-loading="infLoading" :showCheckBox="false">
                <template #columList>
                  <el-table-column label="序号" type="index" width="55" align="center"></el-table-column>
                  <el-table-column label="接口名称" align="left" prop="infName" :show-overflow-tooltip="true"
                                   min-width="120">
                    <template #default="scope">
                      <el-link @click="jumpInf(scope.row.infId)" :underline="false"> {{ scope.row.infName }}</el-link>
                    </template>
                  </el-table-column>
                  <el-table-column label="请求类型" align="center" prop="infMethod" min-width="80">
                    <template #default="scope">
                      <dict-tag :options="infMethod" :value="scope.row.infMethod"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="接口路径" align="left" prop="infUrl" :show-overflow-tooltip="true"
                                   min-width="120"/>
                  <el-table-column label="接口分组" align="left" prop="path" :show-overflow-tooltip="true"
                                   min-width="100"/>
                  <el-table-column label="接口状态" align="center" prop="status" min-width="80">
                    <template #default="scope">
                      <dict-tag :options="sys_normal_disable" :value="scope.row.status"/>
                    </template>
                  </el-table-column>
                </template>
              </xTable>
            </el-tab-pane>
            <el-tab-pane label="目录信息" name="cataMain" class="flex-cloumn">
              <el-form ref="cataInfoRef" :model="form" :rules="rules" label-width="100px">
                <el-row style="width: 100%">
                  <el-col :span="24">
                    <el-form-item label="名称" prop="infNameInput" style="width:100%;">
                      <el-input v-model="form.infNameInput" clearable
                                placeholder="请输入目录名称"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" v-if="form.parentId !== '0'">
                    <el-form-item label="上级目录" prop="parentId">
                      <el-tree-select
                          style="width:100%"
                          v-model="form.parentId"
                          :data="infOptions"
                          :props="{value: 'infId', label: 'infName', children: 'children' }"
                          value-key="infId"
                          placeholder="请选择上级目录"
                          check-strictly
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" v-if="true">
                    <el-form-item label="负责人" prop="leader" style="width:100%">
                      <baseCombox url="/system/user/getUsercombobox"
                                  :queryParam="{pageSize: 50}"
                                  valueField="userId" labelField="userName"
                                  placeholder="请输入负责人" v-model="form.leader">
                      </baseCombox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="显示排序" prop="orderNum">
                      <Numberinput v-model="form.orderNum" precision="0" :min="'0'"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="接口状态">
                      <el-radio-group v-model="form.status">
                        <el-radio
                            v-for="dict in sys_normal_disable"
                            :key="dict.dictValue"
                            :label="dict.dictValue"
                        >{{ dict.dictLabel }}
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item>
                      <el-button
                          type="primary"
                          style="margin: 3px 3px"
                          icon="Edit"
                          @click="handleSaveCata"
                          v-hasPermi="['testmanage:infManage:edit']"
                          :loading="saveLoading"
                      >保存
                      </el-button>
                      <el-button
                          type="danger"
                          style="margin: 3px 3px"
                          icon="Delete"
                          @click="handleDelete"
                          v-hasPermi="['testmanage:infManage:remove']"
                          :loading="deleteLoading"
                      >删除
                      </el-button>
                    </el-form-item>
                  </el-col>

                </el-row>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-row>
    </el-row>
    <!--接口-->
    <el-row v-if="form.infType == 'I'" class="row-container">
      <el-row>
        <el-col :span="24">
          <div :style="{margin: '0px',padding: '5px'}">
            <el-form ref="infMainRef" :model="form" :rules="rules" label-width="auto">
              <el-row>
                <el-col :span="2">
                  <el-form-item label="" prop="infMethod">
                    <dictCombox v-model="form.infMethod" dictType="infMethod" prop="infMethod"
                                :clearable="false" placeholder="请选择方法"></dictCombox>
                  </el-form-item>
                </el-col>
                <el-col :span="14">
                  <el-form-item label-width="1px" label="" prop="infUrl">
                    <el-input v-model="form.infUrl"
                              placeholder="请输入URL"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label-width="auto">
                    <el-button
                        type="primary"
                        style="margin: 3px 3px"
                        icon="Promotion"
                        @click="handleSend"
                        v-hasPermi="['testmanage:infManage:request']"
                        :loading="sendLoading"
                    >发送
                    </el-button>
                    <el-button
                        type="primary"
                        style="margin: 3px 3px"
                        icon="Edit"
                        @click="handleSaveInf()"
                        v-hasPermi="['testmanage:infManage:edit']"
                        :loading="saveLoading"
                    >保存
                    </el-button>
                    <el-button
                        type="danger"
                        style="margin: 3px 3px"
                        icon="delete"
                        :disabled="rowSelect"
                        @click="handleDelete()"
                        v-hasPermi="['testmanage:infManage:remove']"
                        :loading="deleteLoading"
                    >删除
                    </el-button>
                    <el-button
                        type="warning"
                        style="margin: 3px 3px"
                        icon="Edit"
                        @click="handleSaveAs()"
                        v-hasPermi="['testmanage:infManage:add']"
                    >另存为
                    </el-button>
                    <!-- <el-button
                        type="warning"
                        style="margin: 3px 3px"
                        icon="Download"
                        @click="handleExport"
                        v-hasPermi="['testmanage:infManage:export']"
                    >导出
                    </el-button> -->
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="12">
          <div class="interface-request">
            <el-tabs v-model="activeNameInf" lazy="false" style="height: 100%;" class="flex-cloumn">
              <el-tab-pane label="接口信息" name="infMain" class="flex-cloumn">
                <el-form ref="infBaseRef" :model="form" :rules="rules" label-width="100px">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="接口名称" prop="infNameInput">
                        <el-input v-model="form.infNameInput"
                                  placeholder="请输入接口名称"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="form.parentId !== '0'">
                      <el-form-item label="上级目录" prop="parentId">
                        <el-tree-select
                            style="width:100%"
                            v-model="form.parentId"
                            :data="infOptions"
                            :props="{ value: 'infId', label: 'infName', children: 'children' }"
                            value-key="infId"
                            placeholder="请选择上级目录"
                            check-strictly
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="24">
                      <el-form-item label="显示排序" prop="orderNum">
                        <Numberinput v-model="form.orderNum" precision="0" :min="'0'"/>
                      </el-form-item>
                    </el-col>

                    <el-col :span="24" v-if="true">
                      <el-form-item label="负责人" prop="leader" style="width:100%">
                        <baseCombox url="/system/user/getUsercombobox"
                                    :queryParam="{pageSize: 50}"
                                    valueField="userId" labelField="userName"
                                    placeholder="请输入负责人" v-model="form.leader">
                        </baseCombox>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="true">
                      <el-form-item label="超时时间" prop="timeOut" style="width:100%">
                        <el-input v-model="form.timeOut" @input="handleInput" maxlength="10">
                          <template #append>ms</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="接口状态">
                        <el-radio-group v-model="form.status">
                          <el-radio
                              v-for="dict in sys_normal_disable"
                              :key="dict.dictValue"
                              :label="dict.dictValue"
                          >{{ dict.dictLabel }}
                          </el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>

              </el-tab-pane>
              <el-tab-pane label="请求头" name="header" class="flex-cloumn">
                <el-form ref="infHeaderRef" :model="form" :rules="rules" label-width="100px"
                         class="interface-request-form">
                  <el-form-item label="Content-Type" prop="contentType">
                    <el-input v-model="form.contentType"
                              placeholder="请输入Content-Type" disabled/>
                  </el-form-item>
                  <el-form-item label="auth名称" prop="authName">
                    <el-input v-model="form.authName"
                              placeholder="" clearable/>
                  </el-form-item>
                  <el-form-item label="auth值" prop="authValue">
                    <el-input v-model="form.authValue" placeholder="" clearable/>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="请求参数" name="param" class="flex-cloumn">
                <el-form ref="infparamRef" :model="form" :rules="rules" label-width="auto" style="height: 100%;"
                         class="flex-cloumn">
                  <el-row>
                    <el-col :span="4">
                      <el-form-item>
                        <el-button icon="Refresh" type="primary" @click="resetInfRequest">格式化</el-button>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <div v-if="form.requestTime !== null && form.requestTime !== ''">
                        <el-form-item label="请求时间" prop="requestTime">
                          <div v-if="form.changColor">
                            <el-tag type="success">&nbsp;{{ form.requestTime }}</el-tag>
                          </div>
                          <div v-if="!form.changColor">
                            <el-tag type="info">&nbsp;{{ form.requestTime }}</el-tag>
                          </div>
                        </el-form-item>
                      </div>
                    </el-col>
                  </el-row>
                  <el-form-item v-if="jsonEditView" label="" label-width="auto" prop="infRequestJson" class="flex_1">
                    <JsonEditorVue v-model="form.infRequestJson"
                                   :style="{width:'100%',height:'100%'}"
                                   class="editor" hasLogo="false"
                                   :current-mode="form.currentMode">
                    </JsonEditorVue>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="后置操作" name="after" class="flex-cloumn">
                <el-form ref="infAfterRef" :model="form" :rules="rules" label-width="auto" style="height: 100%;"
                         class="flex-cloumn">
                  <el-form-item label="开关">
                    <el-radio-group v-model="form.variableSwitch">
                      <el-radio
                          v-for="dict in sys_env_status"
                          :key="dict.dictValue"
                          :label="dict.dictValue"
                      >{{ dict.dictLabel }}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="变量类型" prop="variableType">
                    <el-input v-model="form.variableType"
                              placeholder="请输入变量类型" disabled/>
                  </el-form-item>
                  <el-form-item label="变量名称" prop="variableName">
                    <el-input v-model="form.variableName"
                              placeholder="请输入变量名称" clearable/>
                  </el-form-item>
                  <el-form-item label="提取表达式" prop="variableEl">
                    <el-input v-model="form.variableEl" placeholder="如：$.result.param.date[0]" clearable/>
                  </el-form-item>
                  <el-form-item label="提取后处理" prop="variableCustom">
                    <el-input v-model="form.variableCustom" placeholder="如：$加自定义参数" clearable/>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
        <!--                        //响应-->
        <el-col :span="12">
          <div :style="{margin: '0px'}" class="interface-response">
            <el-form ref="responseRef" class="interface-response-top">
              <el-form-item label="状态" prop="success">
                <div v-if="form.success === '' || form.success == null">
                  <el-tag type="info">&nbsp;无</el-tag>
                </div>
                <div v-if="form.success === 'true'">
                  <el-tag type="success">成功</el-tag>
                </div>
                <div v-if="form.success === 'false'">
                  <el-tag type="danger">失败</el-tag>
                </div>
              </el-form-item>
              <!-- <el-button icon="Edit" @click="saveReport" v-if="true">保存为报告</el-button> -->
            </el-form>
            <el-tabs v-model="activeNameResponse" lazy="false" class="interface-response-tabs">
              <el-tab-pane label="请求结果" name="responseMain" class="flex-cloumn">
                <el-form ref="resultRef" :model="form" :rules="rules" label-width="auto">
                  <div v-if="!form.changColor">
                    <el-row>
                      <el-col :span="4">
                        <el-form-item label="" prop="">
                          <el-link type="info">&nbsp;</el-link>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                  <div v-if="form.changColor">
                    <el-row>
                      <el-col :span="4">
                        <el-form-item label="响应码" prop="statusCode">
                          <div v-if="form.statusCode === 200">
                            <el-tag type="success">&nbsp;{{ form.statusCode }}</el-tag>
                          </div>
                          <div v-if="form.statusCode !== 200">
                            <el-tag type="info">&nbsp;{{ form.statusCode }}</el-tag>
                          </div>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="耗时" prop="consumeTime" style="margin-left: 3px">
                          <Numberinput v-model="form.consumeTime" disabled="true" append="ms" precision="0" :min="''"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="11">

                        <div v-if="form.responseTime !== null && form.responseTime !== ''">
                          <el-form-item label="响应时间" prop="requestTime" style="margin-left: 3px">
                            <el-tag type="success">&nbsp;{{ form.responseTime }}</el-tag>
                          </el-form-item>

                        </div>
                      </el-col>

                    </el-row>
                  </div>
                  <el-form-item v-if="jsonEditView" label="" label-width="8px" prop="infResponseJson">
                    <JsonEditorVue v-model="form.infResponseJson" readOnly="true"
                                   :style="{ width: '100%',height:'100%' }"
                                   class="editor" hasLogo="false"
                                   :current-mode="form.currentMode"></JsonEditorVue>
                  </el-form-item>
                </el-form>
              </el-tab-pane>

              <el-tab-pane label="实际请求" name="responseParams" class="flex-cloumn">
                <el-form ref="realParamRef" :model="form" :rules="rules" label-width="80px">
                  <el-form-item label-width="80px" label="请求URL" prop="infUrl">
                    <el-input v-model="form.infUrl" disabled="true"
                              placeholder="请输入URL"/>
                  </el-form-item>
                  <el-form-item label-width="80px" label="请求方法" prop="infMethod">
                    <el-input v-model="form.infMethod" disabled="true"
                              placeholder="请输入请求方法"/>
                  </el-form-item>
                  <el-form-item label="计算参数" prop="infRequest">
                    <el-input v-model="form.infRequest" disabled="true"
                              type="textarea" placeholder=""></el-input>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-row>
    </el-row>
    <!--        报告弹窗-->
    <el-dialog v-model="reportOpen" title="保存报告" :close-on-click-modal="false" draggable="true" destroy-on-close
               append-to-body width="700px" height="300px">
      <el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="名称" prop="reportName">
              <el-input v-model="form.reportName" maxlength="30" placeholder="请输入名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版本" prop="reportVersion">
              <el-input v-model="form.reportVersion" placeholder="请输入版本" maxlength="11"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" maxlength="300" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitReportForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!--另存为-->
    <el-dialog :close-on-click-modal="false" draggable="true" title="另存为" v-model="saveAsOpen" width="600px"
               append-to-body>
      <el-form :model="saveAsForm" :rules="saveAsRules" ref="saveAsRef" label-width="80px">
        <el-form-item label="接口名称" prop="infName">
          <el-input v-model="saveAsForm.infName" maxlength="30" placeholder="请输入接口名称"/>
        </el-form-item>
        <!-- <el-form-item label="接口编码" prop="infCode">
            <el-input v-model="saveAsForm.infCode" placeholder="请输入接口编码" maxlength="11"/>
        </el-form-item> -->
        <el-form-item label="上级目录" prop="parentId">
          <el-tree-select
              style="width:100%"
              v-model="saveAsForm.parentId"
              :data="infOptions"
              :props="{value: 'infId', label: 'infName', children: 'children' }"
              value-key="infId"
              placeholder="请选择上级目录"
              check-strictly
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitSaveAs" :loading="saveAsLoading">确 定</el-button>
          <el-button @click="cancelSaveAs">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="InfTab">
import {getCurrentInstance, reactive, ref, toRefs, watch} from "vue";
import InputAmount from '@/lz/base/InputAmount'
import JsonEditorVue from 'json-editor-vue3'
import {
  listInf,
  getInf,
  queryInfAll,
  querySstInfAll,
  delInf,
  addInf,
  updateInf,
  listInfExcludeChild,
  addReport,
  copyInf,
  childrenList
} from "@/api/testmanage/sstinf";
import {
  requestServe,
  requestServeBatch,
} from "@/api/testmanage/inf";
import {isNotVoid, isVoid} from "@/utils/util";
import Numberinput from "@/lz/base/number.vue";
import {getSysTime} from "@/utils/lz";

const {proxy} = getCurrentInstance();

const activeNameCata = ref("infChildrenList")
const infChildrenList = ref([])
const activeNameInf = ref("infMain")
const activeNameResponse = ref("responseMain")

const infLoading = ref(false);
const reportOpen = ref(false);
const saveAsOpen = ref(false);
const jsonEditView = ref(true);
const timer = ref(null)
const {
  sys_normal_disable,
  infMethod,
  sys_env_status
} = proxy.useDict("sys_normal_disable", "infMethod", 'sys_env_status');
const data = reactive({
  formDetail: {
    // infCode: '',
    infName: '',
    infType: '',
    infUrl: '',
    infMethod: 'POST',
    infRequest: '',
    infEnv: '',
    contentType: 'application/json',
    authName: '',
    authValue: '',
    parentId: '',
    ancestors: '',
    leader: '1',
    delFlag: '0',
    orderNum: 0,
    status: "0",
    concurrency: "10",
    round: "10",
    paramType: '',
    infResponse: '',
    infResponseJson: '',
    consumeTime: '',
    success: '',
    mcs: '',
    currentMode: 'code',
    reportName: '',
    reportType: 'S',
    reportVersion: '',
    requestTime: '',
    requestDateTime: '',
    responseDateTime: '',
    changColor: false,
    variableSwitch: '0',
    variableType: '全局变量',
    variableName: 'AUTHORIZATION',
    variableEl: '$.result',
    variableCustom: '$',
  },
  directoryInfo: {
    name: '',
    size: ''
  },
  saveAsForm: {
    infName: '',
    parentId: '',
  },
  rules: {
    parentId: [{required: true, message: "上级目录不能为空", trigger: "blur"}],
    infNameInput: [{required: true, message: "接口名称不能为空", trigger: "blur"}],
    infUrl: [{required: true, message: "显示排序不能为空", trigger: "blur"}],
    reportName: [{required: true, message: "报告名称不能为空", trigger: "blur"}],
    reportVersion: [{required: true, message: "报告版本不能为空", trigger: "blur"}],
    variableSwitch: [{required: true, message: "变量开关不能为空", trigger: "blur"}],
    variableType: [{required: true, message: "变量类型不能为空", trigger: "blur"}],
    variableName: [{required: true, message: "变量名称不能为空", trigger: "blur"}],
    variableEl: [{required: true, message: "提取表达式不能为空", trigger: "blur"}],
  },
  saveAsRules: {
    parentId: [{required: true, message: "上级目录不能为空", trigger: "blur"}],
    infName: [{required: true, message: "接口名称不能为空", trigger: "blur"}],
  },
});

const {formDetail, directoryInfo, saveAsForm, rules, saveAsRules} = toRefs(data);

const props = defineProps({
  form: {
    type: Object,
    default: {}
  },
  infOptions: {
    type: Array,
    default: []
  },
  globalEnv: {
    type: String,
    default: ''
  },
  isShow: {
    type: Boolean,
    default: false,
  }
})

/** 保存目录 */
function handleSaveCata() {
  proxy.$refs["cataInfoRef"].validate(valid => {
    submitForm(valid);
  });
}

/** 保存接口 */
function handleSaveInf() {
  proxy.$refs["infMainRef"].validate(valid => {
    if (valid) {
      proxy.$refs["infBaseRef"].validate(valid => {
        submitForm(valid);
      });
    }
  });
}

/** 提交按钮目录 */
const saveLoading = ref(false);

const handleInput = () => {
  props.form.timeOut = props.form.timeOut.replace(/[^\d]/g, '')
}

function submitForm(valid) {
  if (valid) {
    props.form.infRequest = JSON.stringify(props.form.infRequestJson);
    saveLoading.value = true;
    const data = Object.assign({}, props.form, {infName: props.form.infNameInput})
    if (props.form.action !== 'insert') {
      updateInf(data).then(response => {
        proxy.$modal.msgSuccess("修改成功");
        proxy.$emit('getList');
        props.form.infName = data.infName
      }).finally(() => {
        saveLoading.value = false;
      });
    } else {
      addInf(data).then(response => {
        let infId = response.msg
        proxy.$emit('getList');
        proxy.$emit('refresh', infId);
        proxy.$modal.msgSuccess("新增成功");
        props.form.infName = data.infName
      }).finally(() => {
        saveLoading.value = false;
      });
    }
  }
}

/** 删除按钮操作 */
const deleteLoading = ref(false)

function handleDelete() {
  proxy.$modal.confirm('是否确认删除名称为"' + props.form.infName + '"的数据项?').then(function () {
    deleteLoading.value = true;
    return delInf(props.form.infId).finally(() => {
      deleteLoading.value = false;
    });
  }).then(() => {
    proxy.$emit('removeTab', props.form.infId);
    proxy.$emit('getList');
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {

  });
}

function handleExport() {

}

function handleSaveAs() {
  proxy.$refs["infMainRef"].validate(valid => {
    if (valid) {
      proxy.$refs["infBaseRef"].validate(valid => {
        saveAsOpen.value = true
        Object.assign(saveAsForm.value, props.form)
      });
    }
  });
}

watch(() => props.form, (nv, ov) => {
  if (isNotVoid(nv.infId) && nv.infId >= 10000) {
    activeNameCata.value = 'cataMain'
    props.form.action = 'insert'
    return
  } else {
    props.form.action = 'update'
  }
  if (nv.infType === 'C' && nv !== ov) {
    handleDirectory(props.form)
  }
}, {deep: true, immediate: true})

function handleDirectory(data) {
  directoryInfo.value = {
    name: '',
    size: ''
  }
  infLoading.value = true
  directoryInfo.value.name = data.infName
  childrenList(data.infId).then(response => {
    infChildrenList.value = response.data
    directoryInfo.value.size = '(接口' + response.data.length + '个)'
    infLoading.value = false;
  });
}

const sendLoading = ref(false);

function handleSend() {
  if (!(isNotVoid(props.globalEnv) || isNotVoid(props.form.infEnv))) {
    proxy.$modal.msgError("请选择至少一个环境");
    return
  }
  props.form.infRequest = JSON.stringify(props.form.infRequestJson);
  let data = Object.assign({}, props.form);

  if (isNotVoid(props.globalEnv)) {
    data.infEnv = props.globalEnv
  }
  sendLoading.value = true;
  props.form.requestTime = proxy.getSysTime();
  props.form.requestDateTime = new Date();
  props.form.changColor = false;
  props.form.infResponseJson = {"提示":"请耐心等待","datetime":proxy.getSysTime()};
      requestServe(data).then(response => {

    let result = response.result
    props.form.statusCode = response.code;
    props.form.consumeTime = result.consumeTime;
    props.form.responseTime = proxy.getSysTime();
    props.form.responseDateTime = new Date();
    if (response.code === 200) {
      props.form.success = 'true';
    } else {
      props.form.success = 'false';
    }
    try {
      props.form.infResponseJson = JSON.parse(result.response)
    } catch (error) {
      props.form.infResponseJson = result.response
      console.error(error)
    }

    activeNameResponse.value = "responseMain"
    proxy.$modal.msgSuccess("请求完成");
  }).catch(ErrorRes => {

    let result = ErrorRes.result
    props.form.responseTime = proxy.getSysTime();
    props.form.responseDateTime = new Date();
    props.form.success = 'false';
    props.form.statusCode = ErrorRes.code + "";
    try {
      props.form.infResponseJson = JSON.parse(result.response)
    } catch (error) {
      props.form.infResponseJson = result.response
      console.error(error)
    }
  }).finally(() => {
    sendLoading.value = false;
    props.form.changColor = true;
  });
}

function cancel() {
  reportOpen.value = false;
}

function saveReport() {
  reportOpen.value = true;
}

function submitReportForm() {
  addReport(form.value).then(response => {
    proxy.$modal.msgSuccess("保存报告成功");
    reportOpen.value = false;
  }).catch(() => {
    reportOpen.value = false;
    proxy.$modal.msgError("保存报告异常!");
  });

}

//另存为保存
const saveAsLoading = ref(false);

function submitSaveAs() {
  proxy.$refs["saveAsRef"].validate(valid => {
    if (valid) {
      saveAsLoading.value = true;
      addInf(saveAsForm.value).then(response => {
        saveAsOpen.value = false
        proxy.$modal.msgSuccess("保存成功")
        proxy.$emit('getList')
      }).finally(() => {
        saveAsLoading.value = false;
      });
    }
  })
}

function cancelSaveAs() {
  saveAsOpen.value = false
  saveAsForm.value = {
    infName: '',
    // infCode: '',
    parentId: '',
  }
}

function resetInfRequest() {
  jsonEditView.value = false;
  if (isVoid(props.form.infRequestJson)) {
    props.form.infRequestJson = "JSON不能为空或JSON格式错误,请检查数据";
    jsonEditView.value = true;
    return
  }
  const jsonString = JSON.stringify(props.form.infRequestJson);
  const formattedJson = JSON.parse(jsonString);
  props.form.infRequestJson = formattedJson;
  props.form.currentMode = 'code';
  jsonEditView.value = true;
}

function jumpInf(id) {
  proxy.$emit('jumpToInf', id)
}


</script>

<style scoped>
.el-row {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

/deep/ .jsoneditor-menu a {
  color: #3883fa !important;
  /*display: none*/
}

/deep/ .jsoneditor {
  border: thin solid #ffffff !important;

}

</style>
<style lang="scss" scoped>
.app-container-content .interface-container .el-tabs.page-tabs[data-v-94c6a284] > .el-tabs__header {
  padding-right: 225px;
  margin-bottom: 1px !important;
}

.row-container {
  height: 100%;
  flex-direction: column;
  flex-wrap: unset;
  overflow: hidden;

  .el-row:last-child {
    flex: 1;
    overflow: auto
  }
}

.app-container-content {
  height: 100%;

  .interface-tree {
    height: 100%;

    :deep(.el-card__body) {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }

  .interface-container {
    & > .el-row {
      height: 100%;
      display: flex;
      flex-direction: column;

      & > .el-row:last-child {
        flex: 1;

        .el-card {
          height: 100%;
        }
      }
    }
  }

  .interface-response {
    height: 100%;
    position: relative;

    .el-tabs {
      height: 100%;
    }

    :deep(.el-card__body) {
      height: 100%;
      display: flex;
      flex-direction: column;

      & > .el-row:last-child {
        flex: 1;
      }
    }

    .interface-response-top {
      position: absolute;
      height: 40px;
      right: 0;
      z-index: 1;
      display: flex;
      align-items: center;

      .el-form-item {
        margin-bottom: 0 !important;
      }
    }

    .interface-response-tabs {
      display: flex;
      flex-direction: column;
      width: 100%;

      :deep(.el-tabs__header) {
      }

      :deep(.el-tabs__content) {
        flex: 1;

        .el-tab-pane {
          height: 100%;

          .el-form {
            height: 100%;
            display: flex;
            flex-direction: column;

            .el-form-item:last-child {
              flex: 1;

              .container.editor, .el-textarea, .el-textarea__inner {
                height: 100%;
              }
            }
          }
        }
      }
    }
  }

  .interface-request {
    height: 100%;

    :deep(.el-card__body) {
      height: 100%;

      & > .el-row {
        height: 100%;
        width: 100%;

        .el-tabs {
          height: 100%;
          width: 100%;
          display: flex;
          flex-direction: column;

          .el-tabs__content {
            flex: 1;

            .el-tab-pane {
              height: 100%;

              .el-form {
                height: 100%
              }
            }
          }
        }
      }
    }

    .interface-request-form {
      width: 100%;
      display: flex;
      flex-direction: column;

      :deep(.el-form-item:last-child) {
        flex: 1;

        .container.editor {
          height: 100%;
        }
      }
    }
  }
}

.interface-request, .interface-response {
  :deep(.el-tab-pane) {
    overflow: auto;
  }
}

:deep(div.jsoneditor-outer.has-main-menu-bar) {
  margin-bottom: -35px !important;
  padding-bottom: 35px !important;
}

.center-top {
  // margin: auto;
  // width: 90%;
  padding: 5px;
}


.hover-effect {
  color: black; /* 初始字体颜色 */
}

.hover-effect:hover {
  color: #409eff; /* 鼠标放上去后的字体颜色 */
}

</style>